<template>
	<view>
		<page-head title="已预约" :headtype="2"></page-head>
		<view class="content">
			<view class="time">
				<image src="../../static/order/oclock.png" mode="widthFix"
					style="width: 40rpx;height: 40rpx;margin-right: 16rpx;"></image>
				<view class="">
					{{"预约倒计时："+times}}
				</view>
			</view>
			<view class="tips">
				请在预约时间内到店购买，超过48小时订单自动取消
			</view>
			<view class="product_warp">
				<view v-for="(item,index) in orderDetail.detail" :key="index" style="width: 100%;"
					:class="index!=0?'marT20':''">
					<product-item :item="item"></product-item>
				</view>
			</view>
			<view class="cell_warp">
				<order-cell title="订单编号" lcolor="#666666" :lsize="28" :word="orderDetail.order_sn" rcolor="#999999"
					:rsize="28" padding="20rpx 0rpx 20rpx 0rpx"></order-cell>
				<order-cell title="预约时间" lcolor="#666666" :lsize="28" :word="orderDetail.create_time" rcolor="#999999"
					:rsize="28"></order-cell>
				<order-cell title="商品总额" lcolor="#666666" :lsize="28" :word="'￥'+orderDetail.pay_amount"
					rcolor="#333333" :rsize="28"></order-cell>
			</view>
		</view>
		<view class="submit" @click="cancelOrder()">
			取消预约
		</view>
	</view>
</template>

<script>
	import productItem from "@/components/product_item.vue"
	import orderCell from "@/components/order_cell.vue"
	export default {
		components: {
			productItem,
			orderCell
		},
		data() {
			return {
				order_sn: null,
				orderDetail: {},
				times: '',
				timer: null,
				timess: 0
			}
		},
		onLoad(options) {
			if (options.orderSn) {
				this.order_sn = options.orderSn
				this.getOrderDetail()
			}
		},
		onHide() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null
			}
		},
		methods: {
			gettime(seconds) {
				let data = ""
				if (seconds > 0) {
					var hours = Math.floor(seconds / 3600);
					var minutes = Math.floor((seconds % 3600) / 60);
					var remainingSeconds = seconds % 60;
					data = hours.toString().padStart(2, '0') + ":" + minutes.toString().padStart(2, '0') + ":" +
						remainingSeconds.toString().padStart(2, '0');
				}
				return data
			},
			cancelOrder() {
				uni.showModal({
					title: "确定取消订单吗？",
					cancelText: "取消",
					cancelColor: "#999999",
					confirmText: "确定",
					confirmColor: "#9E190F",
					success: (res) => {
						if (res.confirm) {
							let data = {
								id: this.orderDetail.id
							}
							this.apifun.unirequest("/api/order/cancelOrder", "post", data, (res => {
								if (res.code == 200) {
									this.apifun.toast(res.msg)
									let pages = getCurrentPages();
									let prevPage = pages[pages.length - 2];
									prevPage.$vm.page = 1
									prevPage.$vm.orderList = []
									prevPage.$vm.nodata = true
									prevPage.$vm.more = true
									prevPage.$vm.getOrderList()
									uni.navigateBack({
										delta: 1
									})
								} else {
									this.apifun.toast(res.msg)
								}
							}), true, true)
						}
					}
				})
			},
			async getOrderDetail() {
				let data = {
					order_sn: this.order_sn
				}
				await this.apifun.unirequest('/api/order/getOrderDetail', 'post', data, (res => {
					if (res.code == 200) {
						this.orderDetail = res.data
						this.timess = res.data.appointment_time
						this.times = this.gettime(this.times)
						if (this.timess > 0) {
							this.timer = setInterval(() => {
								this.timess -= 1
								this.times = this.gettime(this.timess)
							}, 1000)
						} else {
							if (this.timer) {
								clearTimeout(this.timer);
								this.timer = null
							}
						}
					} else {
						this.apifun.toast(res.msg)
					}
				}), true, true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.marT20 {
		margin-top: 20rpx;
	}

	.submit {
		width: 600rpx;
		height: 88rpx;
		border-radius: 10rpx;
		background-color: #9E190F;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0rpx auto;
		margin-top: 300rpx;
	}

	.cell_warp {
		width: 690rpx;
		padding: 20rpx 32rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.product_warp {
		width: 690rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tips {
		font-size: 24rpx;
		color: #666666;
		margin-top: 15rpx;
		margin-bottom: 24rpx;
	}

	.time {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

	.content {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>